import React, { useState, useEffect } from 'react'
import { Button, Table, Modal, notification } from 'antd'

import { getDraftList, deleteItem, UploadArticle } from '../../../api/Article-manageApi'
import { DeleteOutlined, EditOutlined, ExclamationCircleOutlined, UploadOutlined } from '@ant-design/icons'
const { confirm } = Modal
export default function NewsDraft(props) {
    const [dataSource, setdataSource] = useState([])
    // 获取草稿文章列表
    useEffect(() => {
        getList()
    }, [])
    // 获取草稿箱数据
    const getList = () => {
        const { id } = JSON.parse(localStorage.getItem("token"))
        getDraftList({
            auditState: 0,
            publishState:3,
            authorId: id,
            limit: 1000,
            page: 1,
        }).then(res => {
            console.log(res);
            let list = res.queryPageList.records
            setdataSource(list)
        })
    }
    // 表头
    const columns = [
        {
            title: 'ID',
            dataIndex: 'pageId',
            render: (pageId) => {
                return <b>{pageId}</b>
            }
        },
        {
            title: '文章标题',
            dataIndex: 'title',
            render: (title, item) => {
                return <a href={`#/news-manage/preview/${item.pageId}`}>{title}</a>
            }
        },
        {
            title: '作者',
            dataIndex: 'author'
        },
        {
            title: '分类',
            dataIndex: 'categoryName',
            render: (categoryName) => {
                return categoryName
            }
        },
        {
            title: "操作",
            render: (item) => {
                return <div>
                    <Button danger shape="circle" title='删除' icon={<DeleteOutlined />} onClick={() => confirmMethod(item)} />

                    <Button style={{ margin: '0 10px' }} shape="circle" title='编辑' icon={<EditOutlined />} onClick={() => {
                        props.history.push(`/news-manage/update/${item.pageId}`)
                    }} />

                    <Button type="primary" title='推送审核' shape="circle" onClick={() => { pushAudit(item) }} icon={<UploadOutlined />} />
                </div>
            }
        }
    ];

    const confirmMethod = (item) => {
        confirm({
            title: '你确定要删除?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                deleteMethod(item)
            },
            onCancel() {
                //   console.log('Cancel');
            },
        });
    }
    //删除
    const deleteMethod = (item) => {
        // 当前页面同步状态 + 后端同步

        setdataSource(dataSource.filter(data => data.pageId !== item.pageId))
        deleteItem(item.pageId).then(res => {
            getList()
        })
    }
    // 推送审核回调
    const pushAudit = (item) => {
        // 发送提交请求
        UploadArticle({
            publishState:0,
            pageId: item.pageId
        }).then((res) => {
            props.history.push('/audit-manage/list')
            notification.info({
                message: `通知`,
                description:
                    `您可以到审核列表中查看您的新闻!`,
                placement: "bottomRight",
            });
        })
    }
    return (
        <div>
            <Table dataSource={dataSource} columns={columns}
                pagination={{
                    pageSize: 5
                }}
                rowKey={item => item.pageId}
            />
        </div>
    )
}
